<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>cs Chat Demo</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul class="pages">
        <li class="chat page" v-if="isLogin">
            <div class="chatArea">
                <ul class="messages">
                    <li v-for="m in msgs" :class="m.type">
                        <span v-if="m.type == 'log'"><span v-html="m.message"></span></span>
                        <span v-else-if="m.type == 'adapter'">
                            当前通讯方式为: {{m.message == 'ws' ? 'Websocket': "HTTP"}}
                            <span @click="toggleAdapter(m.message == 'ws'?'http':'ws')"
                                style="color: #597bdc;cursor:pointer;">点击切换为 {{m.message ==
                                'ws'
                                ? 'HTTP':
                                "Websocket"}}</span>
                        </span>
                        <span v-else-if="m.type == 'online'">
                            {{m.message}}
                            <span @click="resetName" style="color: #597bdc;cursor:pointer;">修改昵称</span>
                        </span>
                        <span v-else>
                            <span class="username" :style="{color:getColor(m.name)}">{{m.name}}</span>
                            <span class="messageBody">{{m.message}}</span>
                        </span>
                    </li>
                </ul>
            </div>
            <input class="inputMessage" v-model="typingMessage" @keypress.enter="sendMessage"
                placeholder="请输入消息，按回车键发送" />
        </li>
        <li class="login page" v-else>
            <div class="form">
                <h3 class="title">你的名字?</h3>
                <input class="usernameInput" v-model="name" type="text" maxlength="14" />
                <p><span @click="randomName" style="cursor: pointer;">点击我随机生成名字</span></p>
                <h4 class="enter" style="cursor: pointer;" @click="login"><span>进入聊天室</span></h4>
            </div>
        </li>
    </ul>
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    <script src="./cssdk.js"></script>
    <script>
        var familyNames = ["赵", "钱", "孙", "李", "周", "吴", "郑", "王", "冯", "陈", "褚", "卫", "蒋", "沈", "韩", "杨", "朱", "秦", "尤", "许", "何", "吕", "施", "张", "孔", "曹", "严", "华", "金", "魏", "陶", "姜", "戚", "谢", "邹", "喻", "柏", "水", "窦", "章", "云", "苏", "潘", "葛", "奚", "范", "彭", "郎", "鲁", "韦", "昌", "马", "苗", "凤", "花", "方", "俞", "任", "袁", "柳", "酆", "鲍", "史", "唐", "费", "廉", "岑", "薛", "雷", "贺", "倪", "汤", "滕", "殷", "罗", "毕", "郝", "邬", "安", "常", "乐", "于", "时", "傅", "皮", "卞", "齐", "康", "伍", "余", "元", "卜", "顾", "孟", "平", "黄", "和", "穆", "萧", "尹"]
        var givenNames = ["子璇", "淼", "国栋", "夫子", "瑞堂", "甜", "敏", "尚", "国贤", "贺祥", "晨涛", "昊轩", "易轩", "益辰", "益帆", "益冉", "瑾春", "瑾昆", "春齐", "杨", "文昊", "东东", "雄霖", "浩晨", "熙涵", "溶溶", "冰枫", "欣欣", "宜豪", "欣慧", "建政", "美欣", "淑慧", "文轩", "文杰", "欣源", "忠林", "榕润", "欣汝", "慧嘉", "新建", "建林", "亦菲", "林", "冰洁", "佳欣", "涵涵", "禹辰", "淳美", "泽惠", "伟洋", "涵越", "润丽", "翔", "淑华", "晶莹", "凌晶", "苒溪", "雨涵", "嘉怡", "佳毅", "子辰", "佳琪", "紫轩", "瑞辰", "昕蕊", "萌", "明远", "欣宜", "泽远", "欣怡", "佳怡", "佳惠", "晨茜", "晨璐", "运昊", "汝鑫", "淑君", "晶滢", "润莎", "榕汕", "佳钰", "佳玉", "晓庆", "一鸣", "语晨", "添池", "添昊", "雨泽", "雅晗", "雅涵", "清妍", "诗悦", "嘉乐", "晨涵", "天赫", "玥傲", "佳昊", "天昊", "萌萌", "若萌"]
        var randomName = () => {
            return familyNames[parseInt((Math.random() * 100)) % familyNames.length] +
                givenNames[parseInt((Math.random() * 100)) % givenNames.length]
        }
        const COLORS = ['#e21400', '#91580f', '#f8a700', '#f78b00', '#58dc00', '#287b00', '#a8f07a', '#4ae8c4', '#3b88eb', '#3824aa', '#a700ff', '#d300e7']
        var httpUrl = "/sse"
        var wsUrl = "ws://" + location.host + "/ws"
        var adapter = localStorage.getItem('adapter')
        var name = localStorage.getItem("nickname")
        var through = false
        if (!name || name == 'null') {
            name = randomName()
        } else {
            through = true
        }
        var vm = Vue.createApp({
            data() {
                return {
                    adapter: adapter || "ws",
                    name: name,
                    msgs: [],
                    isLogin: false,
                    typingMessage: "",
                }
            },
            computed: {
                url() { return this.adapter == "http" ? httpUrl : wsUrl }
            },
            mounted() {
                this.msgs.push({
                    type: 'log',
                    message: '欢迎光临聊天室demo，Github 地址: <a target="_blank" href="https://github.com/eyasliu/cs/tree/master/examples/chat">https://github.com/eyasliu/cs</a><br />'
                })
                this.msgs.push({
                    type: 'log',
                    message: '<font colot="red">当前聊天室仅用于演示目的, 服务器不存储任何数据</font>'
                })
                through && this.login()
            },
            methods: {
                getColor(name) {
                    return COLORS[name.charCodeAt() % COLORS.length]
                },
                randomName() {
                    this.name = randomName()
                },
                login() {
                    this.cs = new CS(this.url)
                    localStorage.setItem('nickname', this.name)
                    this.events()
                },
                toggleAdapter(target) {
                    if (target == this.adapter) {
                        return
                    }
                    this.adapter = target
                    this.cs.resetUrl(this.url)
                    localStorage.setItem('adapter', this.adapter)
                },
                async register() {
                    await this.cs.send('register', { name: this.name })
                    this.isLogin = true
                },
                resetName() {
                    localStorage.removeItem("nickname")
                    window.location.reload()
                },
                async events() {
                    this.cs.on('cs.connected', e => {
                        this.isLogin = true
                        this.msgs.push({
                            type: 'adapter',
                            message: this.adapter,
                        })
                        this.msgs.push({
                            type: 'online',
                            message: this.name + " 已进入聊天室",
                            name: this.name,
                        })
                        this.register()
                    })
                    this.cs.on('cs.closed', e => {
                        if (!this.isLogin) {
                            this.msgs.push({
                                type: 'log',
                                message: "您的网络错误，无法连接服务器",
                                name: this.name,
                            })
                        } else {
                            this.msgs.push({
                                type: 'log',
                                message: this.name + " 已离开聊天室",
                                name: this.name,
                            })
                        }
                    })
                    this.cs.on('push_message', data => {
                        this.msgs.push({
                            type: 'message',
                            name: data.name,
                            message: data.message,
                        })
                    })
                    this.cs.on('user_online', data => {
                        this.msgs.push({
                            type: 'log',
                            message: data.name + " 已上线",
                        })
                    })
                    this.cs.on('user_offline', data => {
                        this.msgs.push({
                            type: 'log',
                            message: data.name + " 已离开",
                        })
                    })

                },
                async sendMessage() {
                    this.cs.send('new_message', { message: this.typingMessage })
                    this.typingMessage = ""
                }
            }
        }).mount(".pages")
    </script>
</body>

</html>